<section id="wrapper">
    <div class="login-register" style="background-image:url(assets/images/background/login-background.jpg);">
        <div class="login-box card">
            <div class="card-body">
                <form #loginForm="ngForm" [formGroup]="formGroup" (ngSubmit)="login(loginForm)" novalidate>
                    <h3 class="box-title m-b-20">用户登录</h3>
                    <div class="col-xs-12 floating-labels">
                        <div class="form-group" opFormGroupValidationClass [formModel]="loginForm" [fieldModel]="formGroup.controls.name">
                            <label for="name">登录账号：</label>
                            <input type="text" class="form-control" id="name" formControlName="name">
                            <span class="bar"></span>
                            <!-- <op-single-error-message [formModel]="loginForm" [fieldModel]="formGroup.controls.name" labelTitle="登录账号"></op-single-error-message> -->
                        </div>
                    </div>
                    <div class="col-xs-12 floating-labels">
                        <div class="form-group" opFormGroupValidationClass [formModel]="loginForm" [fieldModel]="formGroup.controls.password">
                            <label for="password">密码：</label>
                            <input type="password" class="form-control" id="password" formControlName="password">
                            <span class="bar"></span>
                            <!-- <op-single-error-message [formModel]="loginForm" [fieldModel]="formGroup.controls.password" labelTitle="密码"></op-single-error-message> -->
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <div class="checkbox checkbox-primary pull-left p-t-0">
                                <input id="checkbox-signup" type="checkbox" name="rememberMe" formControlName="rememberMe">
                                <label for="checkbox-signup"> 记住我</label>
                            </div>
                            <a href="javascript:void(0)" id="to-recover" class="text-dark pull-right">
                                <i class="fa fa-lock m-r-5"></i> 忘记密码？</a>
                        </div>
                    </div>
                    <div class="form-group text-center m-t-20">
                        <div class="col-xs-12">
                            <button class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light" type="submit">登录</button>
                        </div>

                        <!-- <div class="col-xs-12">
                            <a routerLink="/users/foo-demo">Foo Demo</a> |
                            <a routerLink="/roles">Roles</a> |
                            <a routerLink="/roles/detail/1">Role Detail</a> |
                            <a routerLink="/users">Users</a> |
                            <a routerLink="/users/detail/1">User Detail</a>
                        </div> -->
                    </div>
                </form>
                <!-- <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 m-t-10 text-center">
                            <div class="social">
                                <a href="javascript:void(0)" class="btn  btn-facebook" data-toggle="tooltip" title="Login with Facebook"> <i aria-hidden="true" class="fa fa-facebook"></i> </a>
                                <a href="javascript:void(0)" class="btn btn-googleplus" data-toggle="tooltip" title="Login with Google"> <i aria-hidden="true" class="fa fa-google-plus"></i> </a>
                            </div>
                        </div>
                    </div> -->
                <div class="form-group m-b-0">
                    <div class="col-sm-12 text-center">
                        <p>还没有账号？
                            <a href="register.html" class="text-info m-l-5">
                                <b>马上注册</b>
                            </a>
                        </p>
                    </div>
                    <div class="col-md-12 text-center">
                        登陆账号：admin密码：666666
                    </div>
                </div>
                <form class="form-horizontal" id="recoverform" action="https://wrappixel.com/demos/admin-templates/material-pro/material/index.html">
                    <div class="form-group ">
                        <div class="col-xs-12">
                            <h3>Recover Password</h3>
                            <p class="text-muted">Enter your Email and instructions will be sent to you! </p>
                        </div>
                    </div>
                    <div class="form-group ">
                        <div class="col-xs-12">
                            <input class="form-control" type="text" required="" placeholder="Email"> </div>
                    </div>
                    <div class="form-group text-center m-t-20">
                        <div class="col-xs-12">
                            <button class="btn btn-primary btn-lg btn-block text-uppercase waves-effect waves-light" type="button">Reset</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>